/* ------------------------------------------
Comments style by : Dharla Ferdana
Url author        : http://www.dhf.web.id/
------------------------------------------ */

#comments {
  padding:2em;
  margin:0 2%;
  background-color:#2f2f2f;
  border:2px solid #666;
  -webkit-box-shadow:inset 0 0 7px black;
  -moz-box-shadow:inset 0 0 7px black;
  box-shadow:inset 0 0 7px black;
  color:white;
}

#comments .note,
em[rel=&quot;note&quot;] {
  display:block;
  padding:5px 10px;
  border:1px solid black;
  background-color:#222;
  background-image:-webkit-linear-gradient(top,#333,#222);
  background-image:-moz-linear-gradient(top,#333,#222);
  background-image:-ms-linear-gradient(top,#333,#222);
  background-image:-o-linear-gradient(top,#333,#222);
  background-image:linear-gradient(top,#333,#222);
  -webkit-box-shadow:0 0 0 1px #555;
  -moz-box-shadow:0 0 0 1px #555;
  box-shadow:0 0 0 1px #555;
  color:#ccc;
  font:normal normal 11px Tahoma,Verdana,Arial,Sans-Serif;
  text-shadow:0 1px 0 black;
}

#comments .note a,
#comments .note code {font-size:11px}

#comments img.incomment,
#comments blockquote img.incomment {
  display:block;
  margin:2px auto 0;
}

#comments pre,i[rel=&quot;pre&quot;] {margin:0 0 5px}

.comments a {color:#5687B8}
.comments a.allow,i[rel=&quot;anchor&quot;] {font-size:97%}

#comments code,
i[rel=&quot;code&quot;],
#respond em {
  color:white;
  font:normal normal 12px/1.4 &quot;Courier New&quot;,Courier,Monospace;
}

#comments code a,
#comments code a:hover {
  color:inherit;
  background:none;
}

i[rel=&quot;image&quot;] {
  display:block;
  margin:2px auto;
  width:50px;
  height:50px;
  border:5px solid #222;
  overflow:hidden;
  position:relative;
}

#comments iframe.video {
  width:320px;
  max-width:320px;
  height:224px;
  -webkit-box-shadow:0 1px 3px black;
  -moz-box-shadow:0 1px 3px black;
  box-shadow:0 1px 3px black;
  display:block;
  margin:10px auto;
  border:4px solid #444;
  background-position:50% 50%;
}

.comment_block {
  margin-right:10px;
}

#comments h4 {
  color:white;
  font-size:16px;
  margin:1.5em 0 1em;
  letter-spacing:0;
}

.comment_header {
  width:58px;
  float:left;
  padding-left:10px;
}

.comments .avatar-image-container {
  margin:0 0 3px;
  border:1px solid #3c3c3c;
  padding:4px;
  width:45px;
  height:45px;
  max-width:100%;
  max-height:100%;
  float:none;
  -webkit-box-shadow:0 1px 2px black;
  -moz-box-shadow:0 1px 2px black;
  box-shadow:0 1px 2px black;
  background-color:#666;
  -webkit-background-clip:content-box;
  -moz-background-clip:content-box;
  background-clip:content-box;
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -ms-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  transition:all .5s ease-out;
}

.comments .avatar-image-container img {
  width:45px;
  height:45px;
  max-width:100%;
  max-height:100%;
  overflow:visible;
  float:none;
}

.comments .avatar-image-container img:hover {opacity:.7}

.comment_name {
  font-size:15px;
  font-weight:bold;
  font-style:normal;
  float:left;
}

.comment_name a {
  text-decoration:underline;
}

.comment_name a:hover {
  color:#ff8000;
}

.comment_date {
  font-size:12px;
  font-style:italic;
  line-height:1.8;
  color:#888;
  float:right;
}

.comment_body {
margin:0 0 -5px 58px;
padding:1.26em;
border:1px solid #3c3c3c;
background-color:#333;
-webkit-box-shadow:0 1px 2px black;
-moz-box-shadow:0 1px 2px black;
box-shadow:0 1px 2px black;
overflow:hidden;
position:relative;
-webkit-transition:all 1s ease-out;
-moz-transition:all 1s ease-out;
-ms-transition:all 1s ease-out;
-o-transition:all 1s ease-out;
transition:all 1s ease-out;
}

.comment_body .author-mark {
  display:block;
  width:0;
  height:0;
  border:12px solid transparent;
  border-color:transparent #900 #900 transparent;
  position:absolute;
  right:0;
  bottom:0;
}

.comment_body .comment_info,
.comment_body .para {
  border:1px solid #555;
  background-color:#444;
  padding:.5em .8em;
}

.comment_info {
  height: 20px;
}

.comment_body .para {
  font-size:16px;
  font-style:normal;
}

.comment_body .comment_info {margin-bottom:2px}

.comment_body .para {
  clear:both;
  word-wrap:break-word;
}

.comment_inner {
  padding-bottom:5px;
  margin:5px 0 5px 0;
}

.comment_child .comment_wrap {
  padding-left:30px;
}

.comment_reply a {
  cursor:pointer;
  display:block;
  width:auto;
  margin:0 0 1px 3px;
  padding:2px 7px 3px;
  text-transform:none;
  color:white !important;
  background-color:#527915;
  background-image:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.2));
  background-image:-moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.2));
  background-image:-ms-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.2));
  background-image:-o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.2));
  background-image:linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.2));
  font:normal normal 10px Tahoma,Verdana,Arial,Sans-Serif;
  -webkit-box-shadow:0 2px 2px black;
  -moz-box-shadow:0 2px 2px black;
  box-shadow:0 2px 2px black;
  -webkit-border-radius:3px 0 0 3px;
  -moz-border-radius:3px 0 0 3px;
  border-radius:3px 0 0 3px;
  -webkit-transition:all .16s ease-in-out;
  -moz-transition:all .16s ease-in-out;
  -ms-transition:all .16s ease-in-out;
  -o-transition:all .16s ease-in-out;
  transition:all .16s ease-in-out;
}

.comment_reply .item-control {display:block !important}

.comment_reply a:hover,
.comment_reply a:focus,
.comment_reply a.clicked {
  margin:0 0 1px -3px;
  padding:2px 10px 3px 7px;
  outline:none;
  text-decoration:none;
}

.comment_reply a:focus,
.comment_reply a.clicked {background-color:#890586}

.comment_reply a:active {
  background-image:-webkit-linear-gradient(top,rgba(0,0,0,.2),rgba(0,0,0,0));
  background-image:-moz-linear-gradient(top,rgba(0,0,0,.2),rgba(0,0,0,0));
  background-image:-ms-linear-gradient(top,rgba(0,0,0,.2),rgba(0,0,0,0));
  background-image:-o-linear-gradient(top,rgba(0,0,0,.2),rgba(0,0,0,0));
  background-image:linear-gradient(top,rgba(0,0,0,.2),rgba(0,0,0,0));
  outline:none;
}

.unneeded-paging-control {
  display:none;
}

#comment-editor {
  width:101% !important;
}

.comment-form-block {
  padding:5px;
  border:1px solid #3c3c3c;
  box-shadow:0 0 5px green,0 0 5px #000;
  -moz-box-shadow:0 0 5px green,0 0 5px #000;
  -webkit-box-shadow:0 0 5px green,0 0 5px #000;
  -khtml-box-shadow:0 0 5px green,0 0 5px #000;
}

.comment_form_area {
  text-align:left;
  font-size:12px;
  padding:10px;
  margin:10px;
  border:1px solid #000;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
  -khtml-border-radius:10px;
  box-shadow:0 0 5px green,0 0 5px #000;
  -moz-box-shadow:0 0 5px green,0 0 5px #000;
  -webkit-box-shadow:0 0 5px green,0 0 5px #000;
  -khtml-box-shadow:0 0 5px green,0 0 5px #000;
}

.comment_form a {
  text-decoration:none;
  font-weight:normal;
  font-family:Arial,Helvetica,Garuda,sans-serif;
  font-size:15px;
}

.comment_help {
  margin-top:1px;
  margin-bottom:1px;
}

.comment_reply_form {
  margin:0px 0px 0px 10px;
}

#respond {
  overflow:hidden;
  padding-left:10px;
  clear:both;
}

.comment_body .para.deleted-by-js {color:#bbb}

.comment_body .para.deleted-by-js textarea {
  width:98%;
  height:120px;
  display:block;
  margin:1.7em auto;
}

.cm_pagenavi {
  font-size:10px;
  text-transform:uppercase;
  color:#666;
  text-shadow:1px 1px #FFF;
  font-weight:700;
}

#cm_page_copy {
  display:none;
}

.accessible-hidden {
  position:absolute;
  top:-99px;
  left:-99px;
  width:1px;
  height:1px;
}

#comment-form {
  clear:both;
  margin:3em 0 0;
  padding:1.6em;
  -webkit-box-shadow:0 1px 5px black;
  -moz-box-shadow:0 1px 5px black;
  box-shadow:0 1px 5px black;
  width:auto !important;
  display:block;
}

#respond p {font-size:13px}

#comment-editor {
  width:100%;
  height:270px;
  background:none;
}

#frame-outer {position:relative}
#cancel-answer {display:none}

.comment_wrap #comment-form {
  margin:4px 0 0;
  border:1px solid #3c3c3c;
  -webkit-box-shadow:0 1px 2px black;
  -moz-box-shadow:0 1px 2px black;
  box-shadow:0 1px 2px black;
}

.comment_wrap #cancel-answer {
  color:white;
  display:inline;
  font-size:10px;
}

.comment_wrap #comment-form .heads-up {display:none} 

#emoWrap {
  padding:10px 14px;
  color:black;
  font:bold 12px Tahoma,Arial,Sans-Serif;
  text-align:center;
}

img.emo,input.emo-key {
  position: relative;
  cursor: pointer;
  width: auto;
  vertical-align: middle;
}

input.emo-key {
  background-color: black;
  border: none;
  font-size: 12px;
  font-weight: normal;
  color: white;
  margin: 0 0 0 5px;
  padding: 1px;
}

.text-right {text-align:right}

/* Biru Segar */
.button {
  font: normal 0.9em Arial,Sans-Serif;
  background: url('http://1.bp.blogspot.com/-i8a-1q97r_o/ThQRxeTBjzI/AAAAAAAAAZQ/YfCsBiEpQwI/s1600/button.png') repeat-x;
  border: 0;
  padding: 5px 10px;
  color: white;
  text-shadow: 0 1px 2px #222;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.4);
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.button:hover {
  background-position: 0 -9px;
  color: yellow;
  text-decoration: none;
}

.button:active {
  background: #333;
  outline: none;
}

.button.small,.button.small:active,.button.small:focus {
  color:white;
  font-size:11px;
  font-weight:bold;
  border:none;
  padding:.45em .9em;
}
